/**
* @Author:marina
* @Date: 2025-02-12 09:54:35
* @Description: 表格筛选
*/

<script setup lang="ts">
import { ref } from 'vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import type { User } from '@/interface/interface'



const tableRef = ref<TableInstance>()

//清除日期筛选
const resetDateFilter = () => {
    tableRef.value!.clearFilter(['date'])   //内置函数
}
//清除所有筛选
const clearFilter = () => {
    tableRef.value!.clearFilter()
}

//格式化
const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.address
}

//过滤tag
const filterTag = (value: string, row: User) => {
    return row.tag === value
}

//过滤日期
const filterHandler = (
    value: string,
    row: User,
    column: TableColumnCtx<User>
) => {
    const property = column['property']
    console.log('column:', column)
    // console.log('property:',property)   //date
    return row[property as keyof User] === value
}

const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        tag: 'Office',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        tag: 'Office',
    },
]
</script>


<template>
    <el-button @click="resetDateFilter">重置日期过滤</el-button>
    <el-button @click="clearFilter">重置所有过滤</el-button>
    <el-table
        ref="tableRef"
        row-key="date"
        :data="tableData"
        border
        style="width: 100%"
    >
        <el-table-column
            prop="date"
            label="Date"
            sortable
            width="180"
            column-key="date"
            :filters="[
                { text: '2016-05-01', value: '2016-05-01' },
                { text: '2016-05-02', value: '2016-05-02' },
                { text: '2016-05-03', value: '2016-05-03' },
                { text: '2016-05-04', value: '2016-05-04' },
            ]"
            :filter-method="filterHandler"
        />
        <el-table-column
            prop="name"
            label="Name"
            width="180"
        />
        <el-table-column
            prop="address"
            label="Address"
            :formatter="formatter"
        />

        <el-table-column
            prop="tag"
            label="Tag"
            width="100"
            :filters="[
                { text: 'Home', value: 'Home' },
                { text: 'Office', value: 'Office' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
        >
            <template #default="scope">
                <el-tag
                    :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
                    disable-transitions
                >{{ scope.row.tag }}</el-tag>
            </template>
        </el-table-column>
    </el-table>

</template>


<style scoped lang='less'></style>